<template>
  <div :class="switchValue == '' ? 'home_dark' : 'home_' + switchValue ">
    <div class="second-page">
      <div class="wrap">
        <headerCom2 active="news"></headerCom2>
      </div>
      <div class="banner">
        <div class="wrap">
          <div class="banner-left-title" >
            <p>新闻中心</p>
          </div>
          <div class="banner-right-crumbs" style="left:11.5rem">
            <p>您的位置：首页 > 新闻中心 > {{ navText }}</p>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="centent" style="background: none;padding:0">
          <el-row :gutter="24">
            <el-col class="help-center">
              <el-row style="margin-left: 10px">
                <el-col class="el-menu_box">
                  <el-menu>
                    <template v-for="menu in menuList">
                      <el-menu-item
                        :key="menu['id']"
                        @click="getNewsByMenu(menu)"
                        :class="[
                          'menu-item',
                          activeMenu == menu['id'] ? 'cur-item' : '',
                        ]" >{{ menu["name"] }}
                      </el-menu-item>
                    </template>
                  </el-menu>
                </el-col>
                <el-col class="right_box">
                  <el-row>
                    <el-col class="current-news_box" style="display: flex;align-items: center;flex-direction: row;justify-content: space-between;">
                      <div class="current-news-title">
                        <span
                          v-text="navText"
                          style="font-size: 18px; font-weight: bold"
                        ></span>
                        
                      </div>
                      <div style="padding-right:20px;cursor: pointer;display:flex;align-items: center;" :style="switchValue=='dark'?'color:#FFF':'color:#333'" @click="retrunList" v-show="showNewsContent">
                          <!-- <img :src="switchValue=='dark'?'../assets/image/return.png':'../assets/image/return_light.png'" alt="">
                          <p style="margin:0;padding-left:5px;">返回</p> -->
                          <i class="el-icon-arrow-left"></i>返回
                      </div>
                    </el-col>
                    <template v-if="!showNewsContent">
                      <el-col style="min-height: 450px">
                        <el-row>
                          <template v-for="news in newsList">
                            <div
                              :key="news.id"
                              @click="
                                currentMenu.id == '4' || currentMenu.id == '6'
                                  ? openFileById(news.id)
                                  : getNewsContent(news)
                              "
                              class="news-list"
                            >
                              <el-col :span="21" class="news-title-list" style="display:flex;flex-direction: row;align-items: center;">
                                <!-- <span
                                  class="el-icon-caret-right"
                                  style="color: #409eff; padding-right: 10px"
                                ></span> -->
                                <img src="../assets/image/rightIconblue.png" style="width:20px;height:20px" alt="">
                                <p v-text="news['title']" :style="switchValue=='dark'?'color:#FFF;':'color:#333'" style="font-size:.5rem;width: 500px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin:0!important;padding-left:10px"></p>
                              </el-col>
                              <el-col :span="3" class="news-publishDate-list">
                                <label v-text="news['publishdate']" style="font-size:.5rem"></label>
                              </el-col>
                            </div>
                          </template>
                        </el-row>
                      </el-col>
                      <el-col style="text-align: right">
                        <el-pagination
                          background
                          layout="prev, pager, next"
                          :current-page="pager.currentPage"
                          :page-size="pager.pageSize"
                          :pager-count="pager.pagerCount"
                          :total="pager.total"
                          @current-change="pageCurrentChange"
                          class="pagination-box"
                        ></el-pagination>
                      </el-col>
                    </template>
                    <template v-else>
                      <el-col class="news-title-content">
                        <div v-text="news.title"></div>
                      </el-col>
                      <el-col class="news-info-content">
                        <el-row>
                          <el-col :span="8">
                            <label>新闻来源：</label>
                            <label v-text="news.source"></label>
                          </el-col>
                          <el-col :span="8">
                            <label>发布时间：</label>
                            <label v-text="news.publishDate"></label>
                          </el-col>
                          <el-col :span="8">
                            <label>点击次数：</label>
                            <label v-text="news.clickNumber"></label>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-col>
                        <div v-html="news.content" style="background-color: transparent;color: #fff;" class="text-content"></div>
                      </el-col>
                      <el-col>
                        <ul>
                          <template v-for="(item, index) in attachmentList">
                            <li
                              :key="item.id"
                              v-text="
                                '附件' +
                                (index + 1) +
                                '、' +
                                item['NAME'] +
                                item['EXTNAME']
                              "
                              @click="downloadFile(item)"
                              class="attachment-item"
                            ></li>
                          </template>
                        </ul>
                      </el-col>
                      <el-col>
                        <el-row class="news-button">
                          <el-col :span="12" style="min-height: 1px">
                            <el-button
                              v-if="prevNews"
                              @click="getNewsContent(prevNews)"
                              style="width: 100%"
                              class="el_button_first"
                              >上一篇</el-button
                            >
                          </el-col>
                          <el-col :span="12" style="min-height: 1px">
                            <el-button
                              v-if="nextNews"
                              @click="getNewsContent(nextNews)"
                              style="width: 100%"
                              class="el_button_last"
                              >下一篇</el-button
                            >
                          </el-col>
                        </el-row>
                      </el-col>
                    </template>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
      <footerCom></footerCom>
    </div>
  </div>
</template>

<script scoped>
import '@/utils/rem.js'
import footerCom from "./footerCom.vue"
import HeaderCom2 from './headerCom2.vue'
export default {
  name: "news-center",
  props: {},
  components: {
    footerCom,
    HeaderCom2
  },
  compute: {},
  data() {
    return {
      activeMenu: '',
      index:false,
      navText: "",
      switchValue: 'dark',
      keywords: "",
      showNewsContent: false,
      currentMenu: {},
      menuList: [
        { id: "1", name: "市局要闻" },
        { id: "9", name: "部门动态" },
        { id: "2", name: "区县要闻" },
        { id: "4", name: "工作简报" },
        { id: "5", name: "内部公示" },
        { id: "6", name: "政策法规" },
        { id: "7", name: "公示公告" },
        { id: "8", name: "人事任免" },
      ],
      newsList: [],
      news: {
        title: "",
        source: "",
        publishDate: "",
        clickNumber: "",
        content: "",
      },
      pager: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        pagerCount: 11,
      },
      prevNews: {},
      nextNews: {},
      attachmentList: [],
    };
  },
  created() {
    
    // 获取用户所选主题
    this.getUserStyle();
  },
  mounted() {
    if (this.$route.query["mid"] && this.$route.query["nid"]) {
      //加载新闻详情
      this.menuList.forEach((item) => {
        if (item["id"] == this.$route.query["mid"]) {
          this.currentMenu = item;
          this.getNewsList(item);
        }
      });
      this.getNewsContent({ id: this.$route.query["nid"] });
      this.showNewsContent = true;
    } else if (this.$route.query["mid"]) {
      //加载对应新闻列表
      this.menuList.forEach((item) => {
        if (item["id"] == this.$route.query["mid"]) {
          this.getNewsList(item);
        }
      });
    } else {
      //默认加载
      this.getNewsList(this.menuList[0]);
    }
    document.documentElement.scrollTop = document.body.scrollTop = 0;
  },
  methods: {
    // 获取用户主题
    getUserStyle() {
      let that = this
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserStyle",
          args: [localStorage.getItem("USER_ID")],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            if (response.result == "1") {
              this.switchValue = "light";
            } else {
              this.switchValue = "dark";
            }
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    pageCurrentChange(page) {
      this.pager.currentPage = page;
      this.getNewsList(this.currentMenu);
    },
    getNewsByMenu(menu) {
      this.activeMenu = menu.id;
      this.pager.currentPage = 1;
      this.pager.total = 0;
      this.getNewsList(menu);
    },
    getNewsList(menu) {
 
      this.activeMenu = menu.id
      this.showNewsContent = false;
      this.currentMenu = menu;
      this.navText = menu.name;
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.news.NewsProvider",
          methodName: "getNewsList",
          args: [menu.id, this.pager.currentPage, this.pager.pageSize],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            let data = JSON.parse(response.result);
            this.pager.total = data.totalItems;
            this.newsList = data.items;
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    getNewsContent(news) {
      this.news = {
        title: "",
        source: "",
        publishDate: "",
        clickNumber: "",
        content: "",
      };
      this.attachmentList = [];
      this.showNewsContent = true;
      this.getPrevNews(news);
      this.getNextNews(news);
      if (this.currentMenu.id == "7") {
        this.getAttachmentList(news);
      }
      if(this.currentMenu.id== "5"){
        window.open('http://172.18.2.168/ieju/Login.aspx')
        return false
      }
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.news.NewsProvider",
          methodName: "getNewsDetails",
          args: [news.id, this.currentMenu.id],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            let data = JSON.parse(response.result);
            this.news = {
              title: data["title"],
              source: data["newComing"],
              publishDate: data["publishData"],
              clickNumber: data["callCount"],
              content: data["content"],
            };
            document.documentElement.scrollTop = document.body.scrollTop = 0;
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    getPrevNews(news) {
      let num = news["PETA_RN"] % this.pager.pageSize;
      if (num == 1) {
        if (this.pager.currentPage - 1 == 0) {
          this.prevNews = null;
        } else {
          this.pager.currentPage = this.pager.currentPage - 1;
          this.$.ajax({
            url: this.$API.ajaxPath,
            type: "post",
            data: {
              interfaceName: "antu.newportal-zjx.provider.news.NewsProvider",
              methodName: "getNewsList",
              args: [
                this.currentMenu.id,
                this.pager.currentPage,
                this.pager.pageSize,
              ],
            },
            dataType: "json",
            success: (response) => {
              if (response.status == "0") {
                let data = JSON.parse(response.result);
                this.prevNews = data.item[this.pager.pageSize - 1];
              }
            },
            error: (xhr) => {
              console.log(xhr);
            },
          });
        }
      } else {
        this.prevNews =
          this.newsList[(num == 0 ? this.pager.pageSize : num) - 2];
      }
    },
    getNextNews(news) {
      let num = news["PETA_RN"] % this.pager.pageSize;
      if (num == 0) {
        if (
          this.pager.currentPage + 1 >
          Math.ceil(this.pager.total / this.pager.pageSize)
        ) {
          this.nextNews = null;
        } else {
          this.pager.currentPage = this.pager.currentPage + 1;
          this.$.ajax({
            url: this.$API.ajaxPath,
            type: "post",
            data: {
              interfaceName: "antu.newportal-zjx.provider.news.NewsProvider",
              methodName: "getNewsList",
              args: [
                this.currentMenu.id,
                this.pager.currentPage,
                this.pager.pageSize,
              ],
            },
            dataType: "json",
            success: (response) => {
              if (response.status == "0") {
                let data = JSON.parse(response.result);
                this.nextNews = data.items[0];

                this.activeMenu = this.menuList[0].id;
              }
            },
            error: (xhr) => {
              console.log(xhr);
            },
          });
        }
      } else {
        this.nextNews = this.newsList[num];
      }
    },
    openFileById(id) {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.portal.PortalProvider",
          methodName: "getFileById",
          args: [id],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            let dataList = JSON.parse(response.result);
            if (dataList) {
              dataList.forEach((data) => {
                if (data["FASTFILEURL"].startsWith("ftp")) {
                  let url = data["FASTFILEURL"];
                  let pre = url.substr(0, data["FASTFILEURL"].lastIndexOf("@"));
                  let path = url
                    .substr(
                      data["FASTFILEURL"].lastIndexOf("@") + 1,
                      url.length
                    )
                    .replace("\\", "/");
                  window.open("ftp://" + pre + path);
                } else {
                  window.open(data["FASTFILEURL"]);
                }
              });
            }
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    getAttachmentList(news) {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider",
          methodName: "getFileById",
          args: [news.id],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            this.attachmentList = JSON.parse(response.result);
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    retrunList() {
      this.pager.currentPage
      this.getNewsList(this.currentMenu)
      this.showNewsContent = false
    },
    downloadFile(item) {
      if (item["FASTFILEURL"].startsWith("ftp")) {
        let url = item["FASTFILEURL"];
        let pre = url.substr(0, item["FASTFILEURL"].lastIndexOf("@"));
        let path = url
          .substr(item["FASTFILEURL"].lastIndexOf("@") + 1, url.length)
          .replace("\\", "/");
        window.open("ftp://" + pre + path);
      } else {
        window.open(item["FASTFILEURL"]);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "./css/light.less";
@import "./css/dark.less";
@import "./css/userInfo.less";
  
.second-page {
  .header-right-box {
    display: flex;
    align-items: center;
  }

  .header-search-box {
    display: flex;
    align-items: center;
  }

  .banner {
    width: 100%;
    background-image: url("../assets/image/banner-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

 

  .help-center-title {
    font-size: 24px;
    line-height: 50px;
    vertical-align: middle;
    text-align: left;
    font-weight: bold;
    background-color: #3670ff;
    color: white;
    white-space: nowrap;
  }

  .help-center-location {
    line-height: 50px;
    vertical-align: bottom;
  }

  .help-center-location .description {
    position: relative;
    bottom: 0px;
    left: 20px;
    width: 50px;
  }

  .help-center-location .location {
    display: inline-block;
    margin-left: 20px;
  }

  .info-divider {
    padding-left: 10px;
    border-left: 4px solid #3670ff;
  }

  .system-contact-info {
    margin: 0px 5px;
  }

  .menu-item {
    white-space: inherit;
    line-height: 35px;
    height: 70px;
    padding-top: 20px;
    margin-left: 2px;
    font-size: .5rem;
  }

  .news-info-content {
    width: 33.95rem;
    text-align: center;
    font-family: "宋体";
    font-size: .35rem;
    color: #fff !important;
    padding: .3rem 0;
    .el-row {
      margin-bottom: 0;
    }
  }

  .news-title-content {
    font-size: .6rem;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Bold;
    font-weight: 700;
    text-align: LEFT;
    margin:1.3rem 0;
    color: #fff !important;
    div{
      width: 100%;
      text-align: center;
      font-size: 25px;

    }
  }

  .news-title-list {
    overflow: hidden; /*超出部分隐藏*/
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap; /*规定段落中的文本不进行换行 */
    user-select: none;
  }

  .news-publishDate-list {
    text-align: right;
    padding-right: 10px;
    user-select: none;
  }

  .news-list {
    cursor: pointer;
    line-height: 1.125rem;
    width: 98.5%;
    border-bottom: 1px dashed rgba(221, 221, 221, 1);
    padding: 10px 0;
    span {
      cursor: pointer;
    }
    label {
      cursor: pointer;
      font-size: 0.5rem;
    }
  }

  .news-list:hover {
    background-color: rgba(220, 231, 247, 0.8);
  }

  .current-news-title {
    height: 1rem;
    line-height: 1rem;
    width: 2.4rem;
    text-align: center;
    margin-top: .675rem;
    margin-left: .7rem;
    border-bottom: 3px solid rgba(42, 130, 228, 1);
    padding-bottom: .725rem;
    font-size: .6rem;
  }

  .news-button {
    /deep/ .el-button:hover {
      background-color: #409eff;
      color: white;
    }
  }

  .attachment-item {
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  }

  .attachment-item:hover {
    background-color: #c0c4cc;
  }

  & /deep/ .el-menu {
    border-right: none;
  }

}
.el-menu {
  height: 28.05rem !important;
  background: linear-gradient(180deg,#252b5a, rgba(37,43,90,0.00) 100%);
  width: 10rem;
}
.home_light{
  overflow: hidden;
}
.news-info-content .el-row{
  flex-direction: row!important;
  justify-content: center;
  align-items: center;

}
.second-page .news-info-content{
  width: 100%;
}
.news-button{
  display: flex!important;
  flex-direction: row!important;
  align-content: space-between!important;
}
.el_button_last, .el_button_first{
  border: 1px solid #dedede!important;
  color: #666;
  background-color: #FFF;
}
.home_dark .second-page .text-content,.home_light .second-page .text-content{
  line-height: 24px!important;
  // font-size: 16px!important;
}
.home_light .el-row .el-col,.home_dark .el-row .el-col{
  font-size: 14px!important;
}
table{
  color: #333!important
}
@media screen and (max-width:1440px) {
  .second-page .current-news-title{
        width: 3.4rem;
  }
  .right_box{
    width: 100%!important;
  }
  .second-page .el-menu{
    width: 10.1rem!important;
  }
}
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>
